<template>
    <div class="newArticle">
        <el-row>
            <el-col :span="4">
                <h2>新增文章</h2>
            </el-col>
            <el-col :span="8" :offset="12" align="right">
                <el-button type="primary" icon="el-icon-check" @click="btnClick('save')">保存</el-button>
                <el-button icon="el-icon-back" @click="btnClick('back')">返回列表</el-button>
            </el-col>
        </el-row>
        <div class="articleList">
            <el-row>
                <el-col class="labelText">
                    <label>域名</label>
                </el-col>
                <el-col :span="20">
                    <el-input placeholder="填写域名" v-model="articleData.domain"></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="labelText">
                    <label>标题</label>
                </el-col>
                <el-col :span="20">
                    <el-input placeholder="填写域名" v-model="articleData.title"></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="labelText">
                    <label>排序</label>
                </el-col>
                <el-col :span="20">
                    <el-input-number
                        v-model="articleData.sort"
                        @change="handleChange"
                        :min="0"
                        :max="100"
                    ></el-input-number>(数值越大显示越靠前)
                </el-col>
            </el-row>
            <el-row>
                <el-col class="labelText">
                    <label>文章内容</label>
                </el-col>
                <el-col :span="20">
                    <Ueditor :articleContent="content" ref="mychild" />
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import Ueditor from "@/components/Ueditor";
import Service from "../../services/main";
export default {
    name: "NewArticle",
    components: {
        Ueditor
    },
    data() {
        return {
            articleData: {
                sort: 0
            },
            article_id: this.$route.params.id,
            content: ""
        };
    },
    created() {
        let currentDomain = this.$route.query.domain;
        if (currentDomain) {
            this.articleData.domain = this.$route.query.domain;
        }
        this.getArticleFn();
    },
    mounted() {},
    methods: {
        // 根据id 获取数据
        getArticleFn() {
            if (this.article_id != "new") {
                Service.getArticle(this, { id: this.article_id }).then(res => {
                    this.articleData = res.result.list[0];
                    this.content = this.articleData.content;
                });
            }
        },

        // 保存或返回
        btnClick(type) {
            let that = this;
            if (type === "save" && this.article_id == "new") {
                this.articleData.content = this.$refs.mychild.getUEContent();
                Service.saveArticle(this, this.articleData).then(res => {
                    if (res.errorMsg === "success") {
                        that.$message({
                            message: "文章添加成功！",
                            type: "success"
                        });
                        setTimeout(function() {
                            that.$router.go(-1);
                        }, 500);
                    }
                });
            } else if (type === "save" && this.article_id != "new") {
                this.articleData.content = this.$refs.mychild.getUEContent();
                Service.editArticle(this, this.articleData).then(res => {
                    if (res.errorMsg === "success") {
                        that.$message({
                            message: "文章修改成功！",
                            type: "success"
                        });
                        setTimeout(function() {
                            that.$router.go(-1);
                        }, 500);
                    }
                });
            } else {
                this.$router.go(-1);
            }
        },

        // 排序
        handleChange(value) {
            console.log(value);
        }
    }
};
</script>

<style lang="scss" scoped>
.articleList {
    margin: 20px 0;
}
.labelText {
    width: 100px;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
}
.el-row {
    margin-top: 20px;
}
</style>